<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
    <script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
    <script src="{{asset('js/bootstrap.min.js')}}"></script>
    <script src="{{asset('js/vue.min.js')}}"></script>
    <link href="{{asset('css/index.css')}}" rel="stylesheet">
    @yield('js')
    @yield('css')
</head>
<body style="background-color: #f3f3f3">
<div class="container-fluid">

    <div id="app" style="">
        <div  class="login_app">
            <login></login>

        </div>
    </div>
    <div style="width: 100%;height: 100%;background: rgba(52, 52, 52, 0.1);"></div>
    <script src="{{asset('js/app.js')}}"></script>
        <div class="index_top container">
            <div class="row">
                <div class="col-md-3">
                </div>
                <div class="index_daohang col-md-7">
                    <ul class="index_ul">
                      <li v-for="todo in todos">
                          @{{ todo.text }}
                      </li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <div class="index_log">
                        <a href="javascript:void(0)"  v-text="login" v-on:click="tologin" class="index_login"></a>&nbsp;&nbsp;&nbsp;
                        <a href="javascript:void(0)"  v-text="logon" v-on:click="tologon" class="index_logon"></a>
                    </div>
                </div>
            </div>
        </div>
</div>
    @yield('body')
    @yield('js')
    <script type="text/javascript">
        $(function () {
            $('.index_login').click(function () {
                $('#app').css('display','block')
            })
        })
            new Vue({
                el: '.index_log',
                data:{
                    login: "登入",
                    logon: "注册",
                    isShow:false
                },
                methods:{
                    tologin:function () {
                        this.isShow = !this.isShow;
                    },
                    tologon:function () {

                    }
                    
                }
            });
            new Vue({
                el: '.index_daohang',
                data:{
                    todos:[
                        {text: '全部'},
                        {text: '趣图'},
                        {text: '视频'},
                        {text: '段子'},
                        {text: '爆料'}
                    ]
                }
            })
    </script>
</body>
</html>